<template>
  <div class="login_container">
    <div class="login_box">
      <div class="title_box">
        <p>影院管理登录</p>
      </div>
      <form class="login_form" @submit.prevent="login">
        <input type="text" placeholder="请输入用户名" v-model="loginForm.userName"><br><br>
        <input type="password" placeholder="请输入密码" v-model="loginForm.password"><br><br>
        <button type="submit" class="btn primary">登录</button><br>
        <button type="button" class="btn info" @click="resetLoginForm">重置</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
// import $router from'../router/index'

export default {
  name: "userLogin",
  data() {
    return {
      //登录表单数据对象
      loginForm: {
        userName: 'admin',
        password: '123456'
      },
      //表单验证规则
      loginFormRules: {
        //验证用户名
        userName: [
          { required: true, message: "请输入用户名称", trigger: "blur"},
          { min:2, max: 20, message: "长度在2到20个字符之间", trigger: "blur"}
        ],
        //验证密码
        password: [
          { required: true, message: "请输入密码", trigger: "blur"},
          { min:6, max: 16, message: "长度在6到16个字符之间", trigger: "blur"}
        ]
      }
    }
  },
  methods: {
    //点击重置按钮，重置表单
    resetLoginForm() {
      this.loginForm = {
        userName: '',
        password: ''
      };
    },
    async login() {
      // 简单的前端验证
      let valid = true;
      for (let key in this.loginFormRules) {
        const field = this.loginForm[key];
        const rules = this.loginFormRules[key];
        for (let rule of rules) {
          if (rule.required && !field) {
            this.$message.error(rule.message);
            valid = false;
            break;
          }
          if (rule.min && field.length < rule.min) {
            this.$message.error(rule.message);
            valid = false;
            break;
          }
          if (rule.max && field.length > rule.max) {
            this.$message.error(rule.message);
            valid = false;
            break;
          }
        }
        if (!valid) break;
      }
      if (!valid) return;


        axios.defaults.headers.post['Content-Type'] = 'application/json';
        const response = await axios.post('http://localhost:8181/sysUser/login', JSON.stringify(this.loginForm));
        const res = response.data;
        if (!res || res.code !== 200) {
          this.$message.error(res ? res.msg : '服务器返回错误');
          return;
        }
        // 控制登录权限
        if (!res.data.sysUser.sysRole || !res.data.sysUser.sysRole.children) {
          this.$message.error("抱歉，您没有权限登录，请联系管理员获取权限");
          return;
        }
        this.$message.success("登录成功");
        // 保存token
        window.sessionStorage.setItem("token", res.data.token);
        window.sessionStorage.setItem("loginUser", JSON.stringify({
          sysUser: res.data.sysUser,
          cinemaId: res.data.cinemaId,
          cinemaName: res.data.cinemaName
        }));
        if (res.data.sysUser.sysRole.roleId === 1) {
          window.sessionStorage.setItem("btnPermission", "admin");
          window.open('/welcome',"_self");
        } else {
          window.sessionStorage.setItem("btnPermission", "normal");
          window.open('http://localhost:8081/welcome',"_self");
        }

    }
  }
}
</script>

<style scoped>
.login_container{
  background-color: #2d3a4b;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/login-background.jpg");
}
/* ...您的样式代码... */
.btn {
  padding: 10px 20px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.primary {
  background-color: #409EFF;
  color: white;
}

.info {
  background-color: #6F42C1;
  color: white;
}


</style>


